<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./css/app.css">
</head>

<body>
    <div id="map"></div>
    <div class="container">
        <div class="container-header">
            智慧大屏
        </div>
        <div class="container-content">
            <div class="container-content-box1">
                <div class="width-15"></div>
                <div class="container-content-box1-map"></div>
                <div class="width-10"></div>
                <div class="container-content-box1-echats">
                    <div class="container-content-box1-echats-1" style="margin-top: -15px;">
                        <div class="container-content-box-title">
                            <img src="./img/circle.png" alt="">
                            <span>全省年度工作概括</span>
                        </div>
                        <div class="echats" id="TJGK"></div>
                    </div>
                    <p style="height: 4%;"></p>
                    <div class="container-content-box1-echats-2">
                        <div class="container-content-box-title">
                            <img src="./img/circle.png" alt="">
                            <span>指标完成情况</span>
                        </div>
                        <div style="height: 20px;"></div>
                        <div style="height: calc(100% - 60px);" class="echats" id="ZB"></div>
                    </div>
                </div>
                <div class="width-10"></div>
            </div>
            <div class="container-content-box2">
                <div class="width-10"></div>
                <div class="container-content-box2-table">
                    <div class="container-content-box2-table-title">
                        <img src="./img/circle.png" alt="">
                        <span>重点任务</span>
                    </div>
                    <div class="container-content-box2-table-data">
                        <div class="container-content-box2-table-data-th">
                            <div>任务名称</div>
                            <div>任务目标</div>
                            <div>督办等级</div>
                            <div>主办单位</div>
                        </div>
                        <div class="container-content-box2-table-data-tbody">

                        </div>
                    </div>
                </div>
                <div class="width-10"></div>
                <div class="container-content-box2-echats">
                    <div class="container-content-box-title">
                        <img src="./img/circle.png" alt="">
                        <span>工作排序</span>
                    </div>
                    <div class="echats" id="WORK_SORT"></div>
                </div>
                <div class="width-10"></div>
            </div>
        </div>
        <div class="container-footer"></div>
    </div>
    <script type="text/javascript" src="./js/maptalks.min.js"></script>
    <script type="text/javascript" src="./js/echarts-3.8.5.min.js"></script>
    <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="./jquery.limarquee/js/jquery.liMarquee.js"></script>
    <script type="text/javascript" src="./js/utils/index.js"></script>
    <script type="text/javascript" src="./js/code/table.js"></script>
    <script type="text/javascript" src="./js/echats_conf/TJGK.js"></script>
    <script type="text/javascript" src="./js/echats_conf/ZB.js"></script>
    <script type="text/javascript" src="./js/echats_conf/WORK_SORT.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/maptalks.css">
    <script>
        window.onload = function () {
            const map = new window.maptalks.Map("map", {
                center: [122.75023858448151, 40.99182416376354],
                baseLayer: new maptalks.TileLayer('base', {
                    urlTemplate: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
                    subdomains: ['01', '02', '03', '04'],
                }),
                zoom: 6.7,
                minZoom: 6,
                maxZoom: 8.5,
            });
            fetch("./js/geo_json/210000.geojson")
                .then((response) => response.json())
                .then((res) => {
                    const layer = new maptalks.VectorLayer("bj_layer").addTo(map);
                    const layer_marker = new maptalks.VectorLayer('layer_marker').addTo(map);
                    const geos = maptalks.GeoJSON.toGeometry(res);
                    geos.forEach((item, index) => {
                        item.setSymbol({
                            lineColor: "#1bbc9b",
                            lineWidth: 2,
                            polygonFill: generateRandomColorWithAlpha(),
                        }).on('mouseenter', (e) => {
                            const old_color = e.target.getSymbol().polygonFill
                            const new_color = getOpacityColor(old_color, 0.7)
                            e.target.updateSymbol({
                                polygonFill: new_color
                            });
                        }).on('mouseout', (e) => {
                            const old_color = e.target.getSymbol().polygonFill
                            const new_color = getOpacityColor(old_color, 0.3)
                            e.target.updateSymbol({
                                polygonFill: new_color
                            });
                        })
                        const centerMarker = new maptalks.Marker(item.getCenter(), {
                            'properties': {
                                'name': `${ item.getProperties().name }\n市局`,
                            },
                            'symbol': [{
                                'markerFile': 'img/gaj_blue.png',
                                'markerWidth': 30,
                                'markerHeight': 36,
                                'markerDx': 0,
                                'markerDy': 0,
                                'markerOpacity': 1
                            }, {
                                'textFaceName': 'sans-serif',
                                'textName': '{name}',
                                'textSize': 12,
                                'textDy': 12,
                                'textFill': '#fff'
                            }],
                        }).addTo(layer_marker);
                        centerMarker.setInfoWindow({
                            title: `${item.getProperties().name}市局-详情`,
                            content: `
                            <div>QB：这是QB</div>
                            <div>AJ：这是AJ</div>
                            <div>LL：这是LL</div>
                            <div>TB：这是TB</div>
                            <div>LK：这是LK</div>
                            <div>DY：这是DY</div>
                            <div>ZX：这是ZX</div>
                            <div>XS：这是XS</div>
                            `,
                            autoPan: true,
                        });
                        item.addTo(layer);
                    });
                });


            //统计概括
            const TJGK_ECHAT = echarts.init(document.getElementById("TJGK"));
            TJGK_ECHAT.setOption(TJGK_OPTION);
            //指标完成情况
            const ZB_ECHAT = echarts.init(document.getElementById("ZB"));
            ZB_ECHAT.setOption(ZB_OPTION);
            ZB_ECHAT.on('legendselectchanged', function (params) {
                cur_legend = params.name
                const obj = temp[cur_legend]
                const indicator = Object.keys(obj).map(item => ({
                    text: item,
                    max: obj[item].max
                }))
                ZB_OPTION.radar.indicator = indicator
                ZB_ECHAT.setOption(ZB_OPTION);
            });
            //工作排序
            const WORK_SORT_ECHAT = echarts.init(document.getElementById("WORK_SORT"));
            WORK_SORT_ECHAT.setOption(WORK_SORT_OPTION)
            let interval_work_sort = setInterval(() => {
                if (Number(WORK_SORT_OPTION.dataZoom[0].endValue) === getName.length - 1) {
                    WORK_SORT_OPTION.dataZoom[0].endValue = dataZoom_end;
                    WORK_SORT_OPTION.dataZoom[0].startValue = 0;
                    WORK_SORT_OPTION.dataZoom[1].endValue = dataZoom_end;
                    WORK_SORT_OPTION.dataZoom[1].startValue = 0;
                } else {
                    WORK_SORT_OPTION.dataZoom[0].endValue = WORK_SORT_OPTION.dataZoom[0].endValue + 1;
                    WORK_SORT_OPTION.dataZoom[0].startValue = WORK_SORT_OPTION.dataZoom[0].startValue +
                        1;
                    WORK_SORT_OPTION.dataZoom[1].endValue = WORK_SORT_OPTION.dataZoom[0].endValue + 1;
                    WORK_SORT_OPTION.dataZoom[1].startValue = WORK_SORT_OPTION.dataZoom[0].startValue +
                        1
                }
                WORK_SORT_ECHAT.setOption(WORK_SORT_OPTION);
            }, 1000);
            WORK_SORT_ECHAT.on('legendselectchanged', function (params) {
                WORK_SORT_OPTION.dataZoom[0].endValue = dataZoom_end;
                WORK_SORT_OPTION.dataZoom[0].startValue = 0;
                WORK_SORT_OPTION.dataZoom[1].endValue = dataZoom_end;
                WORK_SORT_OPTION.dataZoom[1].startValue = 0;
                WORK_SORT_ECHAT.setOption(WORK_SORT_OPTION);
            });
            //中点任务
            const ul = $('.container-content-box2-table-data-tbody')
            let html_str = Array.from({
                length: 10
            }).reduce((cur, pre, curIndex) => {
                cur = cur + `<div class="container-content-box2-table-data-tr">
                    <div>任务名称${ curIndex }</div>
                    <div>任务目标${ curIndex }</div>
                    <div>督办等级${ curIndex }</div>
                    <div>主办单位${ curIndex }</div>
                </div>`
                return cur
            }, '')
            ul[0].innerHTML = html_str
            ul.liMarquee({
                direction: 'up',
                height: '225px'
            })
        }
    </script>
</body>

</html>